<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Scene Layer - 4.0 beta 1</title>
<style>
  html, body {
    padding: 0;
    margin: 0;
  }
</style>
 
<link rel="stylesheet" href="https://js.arcgis.com/4.0beta2/esri/css/main.css">
<script src="https://js.arcgis.com/4.0beta2/"></script>
 
<script>
  var scene, view;
 
  require([
    "esri/WebScene",
    "esri/views/SceneView",
    "esri/layers/SceneLayer",
    "esri/layers/FeatureLayer",
    "esri/layers/GraphicsLayer",
    "esri/geometry/Point",
    "esri/geometry/Extent",
    "esri/geometry/Multipoint",
    "esri/geometry/geometryEngine",
    "esri/PopupTemplate",
    "esri/geometry/SpatialReference",
    "esri/renderers/SimpleRenderer",
    "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleFillSymbol",
    "esri/symbols/ObjectSymbol3DLayer",
    "esri/symbols/IconSymbol3DLayer",
    "esri/symbols/PointSymbol3D",
    "esri/symbols/ExtrudeSymbol3DLayer",
    "esri/symbols/PolygonSymbol3D",
    "esri/tasks/QueryTask",
    "esri/tasks/support/Query",
    "esri/Graphic",
    "esri/Camera",
    "esri/request",
    "esri/config",
    "dojo/_base/array",
    "dojo/domReady!"
  ], function (WebScene, SceneView, SceneLayer, FeatureLayer, GraphicsLayer, Point, Extent, Multipoint, geometryEngine, PopupTemplate, SpatialReference, SimpleRenderer, SimpleMarkerSymbol, SimpleFillSymbol, ObjectSymbol3DLayer, IconSymbol3DLayer, PointSymbol3D, ExtrudeSymbol3DLayer, PolygonSymbol3D, QueryTask, Query, Graphic, Camera, esriRequest, esriConfig, arrayUtils){
     
    esriConfig.request.corsEnabledServers.push("http://earthquake.usgs.gov"); 
    
    var lastHour = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson";  
    var last24hrs = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson";
    var last7days = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
    var last30days = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
   
    var clippingExtent = new Extent({
      xmax: -10749512,
      xmin: -10923374,
      ymax: 4352877,
      ymin: 4260227,
      spatialReference: new SpatialReference({
        wkid: 3857   
      })
    });
      
    var cushingExtent = new Extent({
      xmax: -10759799.11314836,
      xmin: -10792753.531996163,
      ymax: 4309292.284758761,
      ymin: 4289717.311748945,
      spatialReference: new SpatialReference({
        wkid: 3857   
      })
    });  
      
    var worldExtent = new Extent({
      xmax: 179,
      xmin: -179,
      ymax: 85,
      ymin: -85,
      spatialReference: new SpatialReference({
        wkid: 4326   
      })
    });
      
    var pTemplate = new PopupTemplate({
      title: "{title}",
      content: "<b>Location:</b> {place}<br>" +
        "<b>Date and time:</b> {time}<br>" +
        "<b>Magnitude (0-10): </b> {mag}<br>" +
        "<b>Intensity (1-10): </b> {mmi}<br>" +
        "<b>Depth: </b> {depth} km<br>" +
        "<b>Number who reported feeling the quake: </b> {felt}<br>" +
        "<b>Significance: </b> {sig}<br><br>" +
        "<a href='{url}'>View more information provided by the USGS</a>",
      fieldInfos: [{
        fieldName: "time",
        format: {
          dateFormat: "shortDateShortTime"
        }
      }, {
        fieldName: "felt",
        format: {
          digitSeparator: true,
          places: 0
        }
      }]
    });
      
    var initCam = new Camera({
      heading: 17.8,
      tilt: 113.6,
      position: new Point({
        latitude: -35.729,
        longitude: -96.925,
        z: -20027, 
        spatialReference: new SpatialReference({
          wkid: 3857
        })
      })
    });
      
    /**************************************************
    * Create graphics with returned geojson data
    **************************************************/  
     
    function getData(geojson){
      return arrayUtils.map(geojson.features, function(feature){
        if(feature.geometry.coordinates[2] < 0){
          feature.geometry.coordinates[2] *= -1;
        }
        feature.properties.depth = feature.geometry.coordinates[2];
        return new Graphic({
          geometry: new Point({
            latitude: feature.geometry.coordinates[1],
            longitude: feature.geometry.coordinates[0],
            z: feature.geometry.coordinates[2] * (-1000),
            spatialReference: new SpatialReference({
              wkid: 3857   
            })
          }),
          attributes: feature.properties
        });
      });
    }
  
    //Executes if data retrevial was unsuccessful.  
    function errback(error){
      console.error("Retreving data failed. ", error);
    } 
      
//    var defaultWellsSym = new SimpleFillSymbol({
//      outline: null,
//      style: "solid",
//      color: "[0,0,0]"
//    });
      
    /**************************************************
    * Renderer properties for hexbins summarizing wells
    **************************************************/ 
      
    var wellsRenderer = new SimpleRenderer({
      symbol: new PolygonSymbol3D({
        symbolLayers: [new ExtrudeSymbol3DLayer()]
      }),
      visualVariables: [{
        type: "colorInfo",
        field: "Point_Count",
        minDataValue: 1,
        maxDataValue: 420,
        colors: ["#F5F6D2","#3B5066"],
        theme: "high-to-low"
      }, {
        type: "sizeInfo",
        field: "Point_Count",
        minDataValue: 1,
        maxDataValue: 1500,
        minSize: 50,
        maxSize: 75000
      }]
    }); 
      
    /**************************************************
    * Renderer for individual wells below surface
    **************************************************/  
      
    var wellsDepthRenderer = new SimpleRenderer({
      symbol: new PointSymbol3D({
        symbolLayers: [new ObjectSymbol3DLayer({
          resource: {
            primitive: "cylinder"
          },
          material: {
            color: "#A52A2A"
          },
          width: 100,
          height: -2000
        })]
      })//,
//      visualVariables: [{
//        type: "colorInfo",
//        field: "Point_Count",
//        minDataValue: 1,
//        maxDataValue: 420,
//        colors: ["#F5F6D2","#3B5066"],
//        theme: "high-to-low"
//      }, {
//        type: "sizeInfo",
//        field: "Point_Count",
//        minDataValue: 1,
//        maxDataValue: 1500,
//        minSize: 50,
//        maxSize: 75000
//      }]
    });  
        
      //http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/wells_OK_density/FeatureServer/0
      //http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/wells_OK_aggregation_hexbins/FeatureServer/0
      //http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/wells_OK_hot_spots/FeatureServer/0
    
    //Layer depicting oil and gas wells  
    var wellsLyr = new FeatureLayer({
      url: "http://services.arcgis.com/jDGuO8tYggdCCnUJ/arcgis/rest/services/well2/FeatureServer/0",
      definitionExpression: "Status = 'ACTIVE'",   //cushingExtent
      outFields: ["*"],  //"Point_Count"
      popupTemplate: new PopupTemplate({
        content: "{*}"
      }),
      renderer: wellsDepthRenderer,
//      opacity: 0.7,
      elevationInfo: {
        mode: "relativeToGround",
        offset: -100
      }
    });
     
    //Task for querying the wells data  
    var wellsQTask = new QueryTask({
      url: "http://services.arcgis.com/jDGuO8tYggdCCnUJ/arcgis/rest/services/well2/FeatureServer/0"
    });
      
    //Default parameters for selecting wells within 10km of click  
    var wellsBufferParams = new Query({
       spatialRelationship: "esriSpatialRelIntersects",
       distance: 10,
       units: "kilometers"
    });  
      
    //Executes when a feature is selected  
    function countWells(evt){
        console.log(evt);
      if(!evt.graphic){
        return;
      }
      wellsBufferParams.geometry = evt.graphic.geometry;
      wellsQTask.executeForCount(wellsBufferParams).then(function(response){
        console.log("wells within 10km: ", response);
      });
    }
    /**************************************************
    * Create a local scene in Oklahoma
    **************************************************/
      
    scene = new WebScene({
      basemap: "topo",
      viewingMode: "local",
      clippingEnabled: true,
      clippingArea: cushingExtent,
      layers: [wellsLyr]
    });
    
 
    //Create SceneView
    view = new SceneView({
      container: "viewDiv",
      map: scene,
//      camera: initCam,
      extent: cushingExtent,
      constraints: {
        collision: {
          enabled: false
        },
        tilt: {
          max: 179.99
        }
      },
      environment: {
        atmosphere: "none",
        stars: "none"
      }
    });
      
    /**************************************************
    * Define renderers for symbolizing earthquakes
    **************************************************/  
      
    //Default quakes symbol underground  
    var sym = new PointSymbol3D({
      symbolLayers:[
        new ObjectSymbol3DLayer({
          resource:{
            primitive: "sphere"
          }
       })
      ]
    }); 
      
    //Quakes renderer underground  
    var quakesRenderer = new SimpleRenderer({
      symbol: sym,
      visualVariables: [{
         type: "colorInfo",
         field: "sig",
         theme: "high-to-low",
         stops: [{ value: 0, color: "white"},
                 { value: 1000, color: "red"}]
      }, {
         type: "sizeInfo",
         field: "mag",
         axis: "all",
         valueUnit: "meters",
         minDataValue: 1,
         maxDataValue: 5,
         minSize: 100,
         maxSize: 2000
      }]
    });
      
    //Quakes symbol color on the surface  
    var surfaceSym = new PointSymbol3D({
      symbolLayers: [
        new IconSymbol3DLayer({
          material: { color: "red" },
          resource: { primitive: "circle" },
          size: 8
      })]    
    }); 
      
    //Quakes renderer on the surface  
    var quakesSurfaceRenderer = new SimpleRenderer({
      symbol: surfaceSym,
      visualVariables: [{
        type: "sizeInfo",
        field: "mag",
        axis: "all",
        valueUnit: "unknown",
        minDataValue: 1,
        maxDataValue: 5,
        minSize: 3,
        maxSize: 50
      }] 
    });
      
 
    //Layer for quakes below the surface  
    quakesDepth = new GraphicsLayer({
      elevationInfo: {
        mode: "absoluteHeight"
      },
      renderer: quakesRenderer,
      popupTemplate: pTemplate
    });
      
    //Layer for quakes on the surface  
    quakesSurface = new GraphicsLayer({
      elevationInfo: {
        mode: "onTheGround"
      },
      renderer: quakesSurfaceRenderer,
      popupTemplate: pTemplate,
      opacity: 0.7
    });  

    //Add features to both quakes layers  
    function addToLayer(graphics){
      quakesDepth.add(graphics);
      quakesSurface.add(graphics);
      scene.add([quakesDepth, quakesSurface]);
    }
    
    //Request the earthquake data from USGS  
    view.then(function(){
      esriRequest({
        url: last30days,
        handleAs: "json"
      }).then(getData, errback).then(addToLayer);  
    });
      
    //When the user clicks the view, return a count
    //of the wells within 10km of the selected feature
    view.on("click", countWells);
  });
</script>
</head>
 
<body>
<div id="viewDiv"></div>
</body>
</html> 